<template>
    <!-- 新增弹出框 -->
    <el-dialog  v-bind:title="titleName"  :visible="Visible" :modal="true" width="30%" 
          :close-on-click-modal="false" :show-close="true" :destroy-on-close="true" 
                :before-close="handleDialogClose">
        <el-form ref="form" :model="data" label-width="80px">
            <el-form-item label="所属系统" style="margin-bottom:10px;margin-top:-10px;">
                <el-select v-model="data.sys_type" placeholder="请选择"  @change="handleChange" style="width:85%;">
                    <el-option
                            v-for="item in xtlx"
                            :key="item.sys_type"
                            :label="item.sys_name"
                            :value="item.sys_type">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="菜单名称" style="margin-bottom:10px;">
                <el-input v-model="data.menu_name" style="width:85%;"></el-input>
            </el-form-item>
            <el-form-item label="菜单图标" style="margin-bottom:10px;">
                <el-input placeholder="选择图标" class="search" size="large" v-model="menu_icon" clearable style="margin-left:0;margin-top:0;width:85%;">
                    <el-popover  placement="right" width="300" trigger="click" slot="append"
                                 ref="popper">
                        <el-row>
                            <el-col v-for="(item,index) in cities" :key=index :span="3">
                                <el-button  :icon="`el-icon-lx-${item}`" @click="selectIcon('el-icon-lx-',{item})"></el-button>
                            </el-col>
                        </el-row>
                        <el-button slot="reference">选择</el-button>
                    </el-popover>
                </el-input>
            </el-form-item>
            <el-form-item label="菜单路径" style="margin-bottom:10px;">
                <el-input v-model="data.menu_url"  style="width:85%;"></el-input>
            </el-form-item>
            <el-form-item label="排序" style="margin-bottom:10px;">
                <el-input v-model="data.menu_number"  style="width:85%;"></el-input>
            </el-form-item>
            <el-form-item label="类型" style="margin-bottom:10px;">
                <input type="radio" value="0" style="margin-left:20px" v-model="data.menu_type" >
                <label for="qiy">菜单</label>
                <input type="radio" value="1" style="margin-left:50px" v-model="data.menu_type">
                <label for="jiny">按钮</label>
            </el-form-item>
            <el-form-item label="状态" style="margin-bottom:10px;">
                <input type="radio" id="qiy" value="1" style="margin-left:20px" v-model="data.menu_status">
                <label for="qiy">启用</label>
                <input type="radio" id="jiny" value="0" style="margin-left:50px" v-model="data.menu_status">
                <label for="jiny">禁用</label>
            </el-form-item>
            <el-form-item label="上级菜单">
                <el-tree
                        :data="treeData"
                        show-checkbox
                        node-key="menu_pk"
                        ref="authTree"
                        @check-change="handleNodeClick"
                        check-strictly="true"
                        :props="defaultProps">
                </el-tree>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="click_Close">关 闭</el-button>
                <el-button type="primary" @click="clicl_Save">保 存</el-button>
            </span>
    </el-dialog>
</template>

<script>
    export default {
        name: "edit",
        inject:['refresh'],
        props: {
            titleName: {
                type: String,
                default: '新增'
            },
            Visible: {
                type:Boolean
            },
            data: {
                sys_type:'',
                sys_name:'',
                menu_name:'',
                menu_icon:'',
                menu_url:'',
                menu_number: '',
                menu_type: '',
                menu_status:'',
                menu_parent: '',
            }
        },
        data(){
            return {
                defaultProps: {
                    children: 'children',
                    label: 'menu_name'
                },
                treeData:[],
                xtlx:[],
                url:'',
                tree_url:'/auth/menu/tree_menu_list',
                url_xtlx: '/auth/dict/selectDict',
                url_save_edit: '/auth/menu/menuSaveUpdate',

                menu_icon:'',
                cities: [
                    'attentionforbid', 'attentionforbidfill', 'attention', 'attentionfill', 'tag', 'tagfill', 'people',
                    'peoplefill', 'notice', 'noticefill', 'mobile','mobilefill','voice','voicefill', 'unlock','lock',
                    'home', 'homefill', 'delete','deletefill', 'notification','notificationfill', 'notificationforbidfill',
                    'like', 'likefill', 'comment', 'commentfill', 'camera', 'camerafill', 'warn', 'warnfill', 'time',
                    'timefill', 'location', 'locationfill', 'favor', 'favorfill', 'skin', 'skinfill', 'news', 'newsfill', 
                    'record', 'recordfill', 'emoji', 'emojifill', 'message', 'messagefill', 'goods', 'goodsfill', 'crown', 'crownfill',
                    'move', 'add', 'hot', 'hotfill', 'service', 'servicefill', 'present', 'presentfill', 'pic', 'picfill', 'rank',
                    'rankfill', 'male', 'female', 'down', 'top', 'recharge', 'rechargefill', 'forward', 'forwardfill',
                    'info', 'infofill', 'redpacket', 'redpacket_fill', 'roundadd', 'roundaddfill', 'friendadd', 'friendaddfill',
                    'cart', 'cartfill', 'more', 'moreandroid', 'back', 'right', 'shop', 'shopfill', 'question', 'questionfill',
                    'roundclose', 'roundclosefill', 'roundcheck', 'roundcheckfill', 'global', 'mail', 'punch', 'exit', 'upload',
                    'read', 'file', 'link', 'full', 'group', 'friend', 'profile', 'addressbook', 'calendar', 'text', 'copy', 
                    'share', 'wifi', 'vipcard', 'weibo', 'remind', 'refresh', 'filter', 'settings', 'scan', 'qrcode', 'cascades',
                    'apps', 'sort', 'searchlist', 'search', 'edit'
                ]
            }
        },
        //初始化
        created() {
            this.fetchTemplateData();
            this.getData();
        },
        methods:{
            selectIcon(val,obj) {
                this.menu_icon = val+obj.item;
            },
            //获取下拉中的text值
            handleChange(val){
                let obj = {};
                obj = this.xtlx.find(function(item){
                    return item.sys_type === val
                });
                this.data.sys_name=obj.sys_name;
            },
            //下拉菜单
            fetchTemplateData(){
                this.$post(this.url_xtlx,{dict_type:'XTLX'}).then(res => {
                    //这里根据自己接口返回进行判断 和循环赋值
                    if(res.code=="success"){
                        const result = res.data;
                        result.forEach((r)=>{
                            this.xtlx.push({
                                sys_type:r.dict_code,
                                sys_name:r.dict_name
                            });
                        });
                    }
                })
            },
            //保存数据方法
            clicl_Save(){
                let ids = this.$refs.authTree.getCheckedKeys(); //获取id
                this.data.menu_parent = ids;
                this.data.menu_icon = this.menu_icon;
                this.$post(this.url_save_edit, this.data).then(res => {
                    this.$message({
                        type : res.code,
                        message: res.msg,
                    });
                    /*清空form表单*/
                    // this.form={brand_right:0};
                    this.Visible=false;
                    //刷新列表页的数据
                    this.refresh();
                })
            },
            //右上角关闭事件
            handleDialogClose(){
                this.click_Close();
            },
            //关闭窗口方法
            click_Close(){
                debugger
                this.Visible=false;
                this.refresh();

            },
            handleNodeClick(data) {
                console.log(this.$refs.authTree.getCheckedNodes());
            },
            //查询所有菜单
            getData(){
                this.data.menu_status = '1';
                this.$post(this.tree_url,this.data).then(res => {
                    if(res){
                        this.treeData= res;
                    }
                })
            },
            setIcon(icon){
                this.menu_icon=icon;
            }
        },
    }
</script>
<style>
    .el-input--suffix .el-input__inner {
        padding-right: 98px;
    }
</style>